<template>
  <!-- 栅格数据页面 -->
  <div class="data-analy-box">
    <el-radio-group
      class="analysis-box hide-first-box"
      v-model="offset"
      size="mini"
      v-if="routeAreaType == 2"
    >
      <el-radio-button
        v-for="(item, index) in offsetNetList"
        v-show="index !== 0"
        :key="index"
        :label="item.value"
        @click.native.prevent="judgeSame(item.value, 'offset')"
      >
        {{ item.label }}
      </el-radio-button>
    </el-radio-group>
    <div style="padding: 5px" class="user-table" v-if="filterAdd.length > 0">
      <!-- <img
        src="/img/left-menu/filter.png"
        alt=""
        class="test-icon test-icon-img"
        @click.stop="showFilterBox"
        title="表格筛选"

      >
      <i
        class="el-icon-setting test-icon"
        @click.stop="showFilterDialog"
        title="表格属性列设置"
      ></i> -->
      <AkTable
        ref="AkTable"
        :tableLoding="tableLoding"
        :sortAttr="filterSortObj"
        :tableData="filterList"
        :labelObj="filterLabel"
        :addList="filterAdd"
        :checkedIdAttr="'id'"
        :checkedId="userLineId"
        :agencyAttrList="['id']"
        @changeSort="changeSortType"
        @changeCId="changeCId"
        @filterChange="filterChange"
      >
      </AkTable>

      <div class="pagination-container">
        <el-pagination
          :hide-on-single-page="true"
          :disabled="tableLoding"
          background
          small
          layout="prev, pager, next"
          :total="filterTotal"
          :page-size="filterPageSize"
          :current-page="filterPageNum"
          align="right"
          :pager-count="5"
          @filterChange="filterChange"
          @current-change="changePage"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import AkTable from '@/components/gisPageComponents/table'
import { getCompareDataList } from '@/apis/gis'
import { mapState, createNamespacedHelpers } from 'vuex'
const {
  mapState: mapStateForm,
  mapMutations: mapMutationsForm,
  mapActions: mapActionsForm
} = createNamespacedHelpers('gisForm')

export default {
  components: { AkTable },
  data() {
    return {
      filterLabel: {
        id: 'ID',
        mobileNum: '移动',
        unicomNum: '联通',
        telecomNum: '电信'
      },
      offset: '',
      filterPageSize: 10,
      filterList: [],
      filterAdd: ['id', 'mobileNum', 'unicomNum', 'telecomNum'],
      filterSortObj: {
        //需要排序的字段
        mobileNum: 'custom',
        unicomNum: 'custom',
        telecomNum: 'custom'
      },
      sortType: 1,
      sortStr: '',
      areaTypeList: [],
      tableLoding: false,
      filterTotal: 0,
      filterPageNum: 1
    }
  },
  props: {
    form: {
      type: Object,
      default: () => {}
    }
  },
  mounted() {
    this.changeTableHeader()
  },
  computed: {
    ...mapState(['home', 'gisForm']),
    ...mapStateForm([
      'mnc',
      'routeType',
      'townId',
      'areaType',
      'userType',
      'inUseAttrList', //正在使用的 属性列
      'userLineDetailsLabel', //属性列对应中文
      'dataSelectList',
      'routeAreaType',
      'offsetNetList',
      'network',
      'gridStatus'
    ])
  },
  // mounted() {
  //   // this.getList()
  // },
  watch: {
    // 'inUseAttrList'(nv) {
    //   if(nv) {
    //     this.sendListLoading = false;
    //     this.attrDialog = false;

    //     // 调用 属性列 修改方法
    //     this.changeAttrBase();
    //   }
    // },
    gridStatus(nv) {
      if (nv) {
        this.offset = this.offsetNetList[1].value
        this.getList()
      }
    },
    ptMonth(nv) {
      if (nv) {
        this.reset()
        this.offset = this.offsetNetList[1].value
        this.getList()
      }
    }
  },
  methods: {
    getList() {
      let data = {
        cellType: '5',
        cityId: this.home.userInfoVo.cityId,
        compareType: this.offset,
        ptMonth: this.gisForm.ptMonth,
        sortType: this.sortType,
        sortStr: this.sortStr,
        // zoneId: this.form.zoneId,
        // townId: this.form.townId,
        // type: 3,
        // areaId: this.form.areaId,
        // areaTypeList: this.areaTypeList,
        pageSize: this.filterPageSize,
        pageNum: this.filterPageNum
      }
      this.tableLoding = true
      getCompareDataList(data)
        .then(res => {
          if (res.code == 1) {
            this.filterList = res.data.list || []
            this.filterTotal = res.data.total
            this.tableLoding = false
          }
        })
        .catch(() => {
          this.tableLoding = false
        })
    },
    reset() {
      this.filterPageNum = 1
      this.sortType = 1
      this.$refs.AkTable.$refs.elTable.clearSort()
      this.sortStr = 'mobileNum'
      this.areaTypeList = []
    },
    // 判断 (栅格选项,关联分析) 同属性是否点击相同
    judgeSame(item, attr, disabled = false) {
      if (disabled) return false
      item === this[attr] ? (this[attr] = null) : (this[attr] = item)
    },
    changeTableHeader(nv = 0) {
      //动态切换列表表头
      // let obj = {
      //   mnc0: 'mobile',
      //   mnc1: 'unicom',
      //   mnc11: 'telecom'
      // }
      // let mnc = obj[`mnc${nv}`]
      // this.filterAdd = ['id'].concat([
      //   `${mnc}`,
      //   `${mnc}`
      // ])
    },
    userLineId(id) {
      this.$emit('checkedId', id)
    },
    // 更改sort
    changeSortType(e) {
      // console.log(e)
      this.sortStr = e.sortStr
      this.sortType = e.sortType
      this.getList()
      // this.setFilterSort(e)
    },
    changeCId(e, type) {
      // console.log(e)
      let data = {
        ptMonth: this.form.ptMonth,
        type: 3,
        areaId: e
      }
      this.$emit('locaclAraa', data)
    },
    changePage(data) {
      this.filterPageNum = data
      this.getList()
    },
    filterChange(data) {
      // console.log(data)
      this.areaTypeList = data.areaType
      this.getList()
    }
  }
}
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.data-analy-box {
  .test-icon {
    cursor: pointer;
    position: absolute;
    top: 7px;
    right: 30px;
    font-size: 17px;
    color: #fff;
    z-index: 2;
  }
  .test-icon-img {
    width: 17px;
    height: 17px;
    right: 54px;
  }
  .download-icon-img {
    width: 18px;
    height: 18px;
    // right: 73px;
  }
}
.analysis-box {
  padding: 5px;
}
</style>
